<template>
  <div class="container">
    <!-- 导航栏 -->
    <div class="nav">
      <div style="margin-left: 30px">
        <ul v-if="userTel == null" class="navul">
          <li @click="gohomepage">
            <van-icon name="wap-home" color="#FF4400" />
            闲呗首页
          </li>
          <li>
            <a class="mylogingo" @click="goLogin">登录</a>&nbsp;/&nbsp;<a
              @click="gozce"
              >注册</a
            >
          </li>
          <li>退出</li>
        </ul>
        <ul v-else class="navul">
          <li  @click="gohomepage"><van-icon name="wap-home" color="#FF4400" />闲呗首页</li>
          <li>欢迎你：{{ this.userTel }}</li>
          <li @click="tuichu">退出</li>
        </ul>
      </div>
      <div style="float: right">
        <ul class="navultow">
          <li @click="gomycenter" class="mycb1">
            <a class="myxb">我的闲呗</a>
            <div class="hen"></div>
            <ul class="second">
              <li><a class="second1">我已买到的宝贝</a></li>
              <li class="second1">我已卖出的宝贝</li>
            </ul>
          </li>
          <li>
            <van-icon name="star" color="#FF4400" />收藏夹
            <div class="hen"></div>
          </li>
          <li @click="gocustomerchat()">
            联系客服
            <div class="hen"></div>
          </li>
          <li>商家中心</li>
        </ul>
      </div>
    </div>



    <!-- 联系平台客服 -->
    <div class="contactUs">
      <p style="margin: 0; line-height: 40px">拍品详情</p>
      <div style="display: flex; align-items: center; margin: 0">
        <p style="color: rgb(102, 102, 102); margin: 0; margin-right: 10px">
          <span>对拍卖流程有问题?拍卖客服专线:</span>
          <span >400-622-9586</span>
        </p>
        <p style="display: flex; align-items: center; margin-left:7px">
          <van-icon name="fire" :color="collectColor"/>
          <span @click="yuyue">预约拍卖</span>
        </p>
      </div>
    </div>
    <!-- 商品详情展示 -->
    <div class="showGoods">
      <div class="left">
        <!-- 放大镜 -->
        <div class="left1" v-if="goodsArr.length != 0">
          <!-- 父容器 -->
          <div class="even"></div>
          <!-- 鼠标移入的地方 -->
          <img :src="goodsArr[0].commodityImg" id="detail" /><!-- 主图 -->
          <div class="big">
            <img
              :src="goodsArr[0].commodityImg"
              id="detail1"
            /><!-- 主图放大图 -->
          </div>
          <div class="mask"></div>
          <!-- 遮罩层 -->
        </div>

        <div class="left2">
          <!-- 详情图切换主图 -->
          <ul id="smUl">
            <li v-for="(item, index) in goodsArr" :key="index">
              <img class="img1" :src="item.imgUrl" :data="item.imgUrl" />
            </li>
          </ul>
        </div>
      </div>

      <!-- 拍卖商品信息 -->
      <div v-if="goodsArr.length > 0" >
        <div style="width:500px; margin-top:5px;font-size: 20px; font-weight: bold;overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis">
          {{ goodsArr[0].commodityName }}
        </div>
        <div style="display: flex; margin-top:10px">
          <p style="font-size: 20px;color: white;background: red;margin: 0;width: 10%;">
            正在<br />进行
          </p>
          <div
            style="display: flex;justify-content: space-between;margin: 0;width: 90%;background: orangered;color: white;">
            <div style="margin-top: 6px;margin-left:7px">
              <span>距离结束仅剩:</span>
              <van-count-down :time="time" />
            </div>
            
          </div>
        </div>
        <!-- 当前价 起拍价 -->
        <div>
          <p style="margin: 0; padding: 10px">
            <span style="margin-right: 30px; color: grey">当前价</span>
            <!-- 动态 -->
            <span style="color: red">{{ goodsArr[0].nowPrice }}</span>
          </p>
          <p style="margin: 0; padding: 10px">
            <span style="margin-right: 30px; color: grey">起拍价</span>
            <!-- 动态 -->
            <span style="color: rgb(102, 102, 102)">{{
              goodsArr[0].nowPrice
            }}</span>
          </p>
        </div>

        <!-- 出价 步进器-->
        <div style="display: flex; margin-top: 20px">
          <el-input-number
            v-model="num"
            :step="add"
            :min="num1"
          ></el-input-number>
          <el-button style="margin-left: 25px" @click="chujia()"
            >出价</el-button
          >
        </div>

        <!-- 提示建议 -->
        <div style="background: rgb(255, 252, 224); margin-top: 20px">
          <div style="margin: 0; display: flex; align-items: center">
            <p style="margin: 5px 0; color: #de6a1c">
              建议您在开拍前至少一个工作日支付保证金报名，以免因支付问题而错过拍卖。
            </p>
          </div>
        </div>

        <!-- 拍卖说明 -->
        <div
          style="
            display: flex;
            padding: 10px 0;
            border-bottom: 1px solid lightgrey;
          "
        >
          <span style="color: grey; margin: 0; margin-right: 20px"
            >拍卖说明</span
          >
          起拍价: ￥{{ goodsArr[0].nowPrice}} 加价幅度:￥{{goodsArr[0].addPrice}} 保留价:无 延时周期:无
        </div>
        <!-- 服务支持 -->
        <div style="display: flex; padding: 10px 0">
          <span style="color: grey; margin: 0; margin-right: 20px"
            >服务支持</span
          >
          <div style="margin: 0">
            <!-- <img style="width: 18px;height: 18px;margin: 0;margin-right: 5px;" src="../../public/paimai/DM_20221009104631_001.png" alt=""> -->
            <span>7天鉴赏期</span>
          </div>
        </div>
      </div>

      <!-- 出价排行 -->
      <div style="margin-top: 5px;">
        <p style=" font-weight: bold">出价排行</p>
        <div class="paihang" v-for="(item,index) in paimaiArr" :key="index" :class="{textRed: index==0}"  >
          <div >{{index+1}}</div>
          <div >{{item.userTel}}</div>
          <div>￥{{item.currentMoney}}</div>
        </div>
      </div>
    </div>
    <!-- 竞拍流程 -->
    <div
      style="
        width: 95%;
        margin: 40px auto;
        background: rgb(247, 247, 247);
        border: 1px solid lightgrey;
        display: flex;
        align-items: center;
      "
    >
      <span
        style="
          display: inline-block;
          font-size: 22px;
          padding: 30px;
          width: 10%;
        "
        >竞拍流程:</span
      >
      <div
        style="
          width: 88%;
          display: flex;
          justify-content: space-between;
          padding: 0 50px;
        "
      >
        <div
          style="
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          "
        >
          <!-- <img style="width: 18px;height: 18px;margin: 0;" src="../../public/paimai/DM_20221009104631_001.png" alt=""> -->
          <span>点击出价</span>
        </div>
        <!-- <img style="width: 36px;height: 36px;margin: 0;" src="../../public/paimai/DM_20221009104631_001.png" alt=""> -->
        <div
          style="
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          "
        >
          <!-- <img style="width: 18px;height: 18px;margin: 0;" src="../../public/paimai/DM_20221009104631_001.png" alt=""> -->
          <span>参与竞拍</span>
        </div>
        <!-- <img style="width: 36px;height: 36px;margin: 0;" src="../../public/paimai/DM_20221009104631_001.png" alt=""> -->
        <div
          style="
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
          "
        >
          <!-- <img style="width: 18px;height: 18px;margin: 0;" src="../../public/paimai/DM_20221009104631_001.png" alt=""> -->
          <span>竞拍成功</span>
        </div>
        <!-- <img style="width: 36px;height: 36px;margin: 0;" src="../../public/paimai/DM_20221009104631_001.png" alt=""> -->
        <div
          style="
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          "
        >
          <!-- <img style="width: 18px;height: 18px;margin: 0;" src="../../public/paimai/DM_20221009104631_001.png" alt=""> -->
          <span>支付货款</span>
        </div>
        <!-- <img style="width: 36px;height: 36px;margin: 0;" src="../../public/paimai/DM_20221009104631_001.png" alt=""> -->
        <div
          style="
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          "
        >
          <!-- <img style="width: 18px;height: 18px;margin: 0;" src="../../public/paimai/DM_20221009104631_001.png" alt=""> -->
          <span>交易完成</span>
        </div>
      </div>
    </div>
    <!-- 主要内容区 -->
    <div class="mainContent" style="width: 95%; margin: 0 auto; display: flex" v-if="hotelArr.length>0">
      <!-- 显示 -->
      <div style="flex: 2; margin-right: 10px; height: auto">
        <!-- 关注卖家 -->
        <div style="width: 95%; margin: 0 auto; border: 1px solid lightgrey">
          <div
            style="
              background: rgb(247, 247, 247);
              margin: 0;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <!-- 动态 -->
            <span
              style="
                padding: 10px 0;
                font-size: 18px;
                font-weight: bold;
                margin: 0;
              "
              >{{hotelArr[0].userName}}</span
            >
            <!-- <img style="width: 18px;height: 18px;margin: 0;" src="../../public/paimai/DM_20221009104631_001.png" alt=""> -->
          </div>
          <div
            style="
              display: flex;
              justify-content: space-around;
              align-items: center;
              margin-top: 15px;
            "
          >
            <div
              style="
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
              "
            >
              <span>6447</span>
              <span>在拍拍品</span>
            </div>
            <div
              style="
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
              "
            >
              <span>67926</span>
              <span>全部拍品</span>
            </div>
          </div>
          <div
            style="display: flex; justify-content: space-evenly; margin: 15px"
          >
            <el-button type="info">全部拍品</el-button>
            <el-button type="info" @click="guanZhu()">关注卖家</el-button>
          </div>
        </div>
        <!-- 热门拍卖 -->
        <div class="hotAuction" style="margin-top: 30px">
          <div style="width: 95%; margin: 0 auto; border: 1px solid lightgrey">
            <p
              style="
                background: rgb(247, 247, 247);
                margin: 0;
                padding: 10px 20px;
                font-size: 18px;
                font-weight: bold;
              "
            >
              热门拍卖
            </p>
            <!-- 热门商品展示 -->
            <ul style="list-style: none; padding: 0; margin: 0">
              <li
                style="
                  padding: 20px 20px 0 20px;
                  background: rgb(255, 255, 255);
                "
                v-for="n in 6"
                :key="n"
              >
                <!-- 动态 -->
                <!-- <img style="width: 100%;height: 100%;margin: 0;" src="../../public/paimai/DM_20221010022852_001.jpg" alt=""> -->
                <p style="padding: 10px 0; font-size: 13px">
                  【珠宝严选】细腻油润油性十足【石来运转】和田玉原石挂件
                </p>
                <p style="color: grey; font-size: 13px">
                  <span style="margin-right: 10px">当前价</span>
                  <span>￥950</span>
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 右侧选项卡 -->
      <div class="tabs_right" style="flex: 9; height: auto">
        <div style="position: relative">
          <el-tabs type="border-card">
            <el-tab-pane label="拍品详情">
              <div
                style="
                  width: 95%;
                  margin: 0 auto;
                  padding: 15px 0;
                  display: flex;
                  flex-direction: column;
                "
              >
                <!-- 特别提示 -->
                <div
                  style="
                    display: flex;
                    align-items: center;
                    border: 1px solid lightgrey;
                    padding: 10px 0;
                  "
                >
                  <p
                    style="
                      margin: 0;
                      width: 15%;
                      font-size: 22px;
                      font-weight: bold;
                      text-align: center;
                    "
                  >
                    特别提示
                  </p>
                  <div
                    style="
                      font-size: 15px;
                      width: 85%;
                      margin: 0;
                      padding: 0 20px;
                      border-left: 1px solid lightgrey;
                    "
                  >
                    <p>
                      <span style="margin-right: 8px">1.真伪:</span>
                      <span style="color: grey"
                        >上拍机构的企业相关资质已审核，但拍品介绍（包括图片、布并上传，所有上拍的拍品由送拍机构自行承担相应担保责任;</span
                      >
                    </p>
                    <p style="margin-top: 10px">
                      <span style="margin-right: 8px">2退换货:</span>
                      <span style="color: grey"
                        >拍卖拍品不同于普通网购商品,多数属于孤品,消费者通过竞价方式购买拍品,一旦售出将影响拍品价值,“7天退货”服务为卖家可选服务保障,不强制送拍机构提供,竞拍前请充分考虑。</span
                      >
                    </p>
                  </div>
                </div>
                <!-- 拍品信息 -->
                <div style="width: 100%" v-if="goodsArr.length>0">
                  <el-divider content-position="center">拍品信息</el-divider>
                  {{goodsArr[0].describe}}
                </div>

                <!-- 拍品详图 -->
                <div style="width: 100%">
                  <el-divider content-position="center">拍品详图</el-divider>
                  <span  class="xiangqingtu">
                      <img  v-for="(item,index) in goodsArr" :key=index  :src="item.imgUrl">
                  </span>
                  <div >
                     
                  </div>
                </div>
                <!-- 竞拍须知 -->
                <div style="width: 100%">
                  <el-divider content-position="center">竞拍须知</el-divider>
                  <div style="margin: 0; padding: 15px">
                    <p style="display: flex; margin: 5px 0">
                      <span style="width: 120px; font-weight: bold; margin: 0"
                        >关于发货</span
                      >
                      <span style="color: grey; margin: 0"
                        >付款成功后我们会在48小时内为您发出。</span
                      >
                    </p>
                    <p style="display: flex; margin: 5px 0">
                      <span style="width: 120px; font-weight: bold; margin: 0"
                        >竞拍时间</span
                      >
                      <span style="color: grey; margin: 0"
                        >每款商品页面里都有商品拍卖倒计时，为了您能竞拍成功，建议您提前提交保证金，确保第一时间参加竞拍。</span
                      >
                    </p>
                    <p style="display: flex; margin: 5px 0">
                      <span style="width: 120px; font-weight: bold; margin: 0"
                        >关于实物</span
                      >
                      <span style="color: grey; margin: 0"
                        >因所有拍卖商品为提供商品，已提前进行封库,不在店内出售展示。</span
                      >
                    </p>
                    <p style="display: flex; margin: 5px 0">
                      <span style="width: 120px; font-weight: bold; margin: 0"
                        >正品保证</span
                      >
                      <span style="color: grey; margin: 0"
                        >所有商品均经过机构鉴定后参拍，都属于孤品，请您在仔细了解详情后竞拍，保真与服务至上始终是我们的承诺。</span
                      >
                    </p>
                  </div>
                </div>
                <!-- 包装运输 -->
                <div style="width: 100%">
                  <el-divider content-position="center">包装运输</el-divider>
                  <div style="margin: 0; padding: 15px">
                    <p style="display: flex; margin: 5px 0">
                      <span style="width: 120px; font-weight: bold; margin: 0"
                        >关于包装</span
                      >
                      <span style="color: grey; margin: 0"
                        >拍品均配定制的精美礼盒。</span
                      >
                    </p>
                    <p style="display: flex; margin: 5px 0">
                      <span style="width: 120px; font-weight: bold; margin: 0"
                        >运输安全</span
                      >
                      <span style="color: grey; margin: 0"
                        >运输包装由快递人员包装封箱，拍品均做保价处理。</span
                      >
                    </p>
                    <p style="display: flex; margin: 5px 0">
                      <span style="width: 120px; font-weight: bold; margin: 0"
                        >发货快递</span
                      >
                      <span style="color: grey; margin: 0"
                        >全场默认顺丰快递,500元以上发货京东快递,不到地区发货邮政EMS,如有特殊指定快递请及时联系我们。</span
                      >
                    </p>
                    <p style="display: flex; margin: 5px 0">
                      <span style="width: 120px; font-weight: bold; margin: 0"
                        >收货签收</span
                      >
                      <span style="color: grey; margin: 0"
                        >请保持电话畅通,收到货后请检查无误后签收．如发现错误立即联系我们。</span
                      >
                    </p>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="拍品参数">
              <!-- 拍品参数 -->
              <div
                style="
                  width: 95%;
                  margin: 0 auto;
                  padding: 15px 0;
                  display: flex;
                  flex-direction: column;
                "
              >
                <el-divider content-position="center">拍品参数</el-divider>
                <div style="margin: 0; padding: 15px">
                  <p style="margin: 8px 0">
                    <span style="width: 120px">认证状态：</span>
                    <span style="color: grey">CMA</span>
                  </p>
                  <p style="margin: 8px 0">
                    <span style="width: 120px">鉴定标识：</span>
                    <span style="color: grey">国内鉴定</span>
                  </p>
                  <p style="margin: 8px 0">
                    <span style="width: 120px">作品出处：</span>
                    <span style="color: grey">以证书为准</span>
                  </p>
                  <p style="margin: 8px 0">
                    <span style="width: 120px">净重：</span>
                    <span style="color: grey">105g</span>
                  </p>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="保证金须知">
              <!-- 保证金须知 -->
              <div
                style="
                  width: 95%;
                  margin: 0 auto;
                  padding: 15px 0;
                  display: flex;
                  flex-direction: column;
                "
              >
                <el-divider content-position="center">保证金须知</el-divider>
                <div style="margin: 0; padding: 15px">
                  <div style="margin: 8px 0">
                    <p style="font-weight: bold">一、保证金的缴纳:</p>
                    <p style="padding-left: 32px; color: grey">
                      保证金是竞拍人参加竞拍的凭证，如用户有意参加相关商品竞拍活动，则须缴纳卖家设置的参与竞拍活动的保证金。
                    </p>
                    <p style="font-weight: bold">缴纳次数:</p>
                    <p style="padding-left: 32px; color: grey">
                      如参加升价拍，每个商品的竞拍只需要缴纳─次保证金;
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      如参加降价拍，每出价一次都需要缴纳一次保证金，并且每次出价只可以竞拍一件拍品。
                    </p>
                  </div>
                  <div style="margin: 8px 0">
                    <p style="font-weight: bold">二、保证金的处理:</p>
                    <p style="font-weight: bold">
                      在符合以下条件时将原路退还用户保证金:
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      1.用户未成功竞拍商品:例如在竞拍过程中始终未出价、在竞拍过程中放弃加价等情况;
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      ⒉.用户竞拍成功后，商家主动关闭交易或未履约发货或因商家其他原因导致交易未完成的;
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      竞拍结束后，系统会自动在1-15个工作日内将款项内退还到支付账号中，如您缴纳的竞拍保证金符合退还条件，但是系统未予退还，您可以联系拍卖客服专线400-6229586，我们会尽快帮您处理。
                    </p>
                  </div>
                  <div style="margin: 8px 0">
                    <p style="font-weight: bold">三、保证金的扣除</p>
                    <p style="padding-left: 32px; color: grey">
                      1.在升价拍竞拍成功之时起的24小时内未按照成交价格支付拍品货款的;在降价拍竞拍成功之时起的24小时内未按照成交价格支付拍品货款的。
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      ⒉.在竞拍成功且付款后，竞拍人申请退款（卖家提供7天无理由退货服务的除外）。
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      如因卖家原因导致竞拍人不付款，竞拍人可在交易关闭的15天内联系拍卖客服专线400-622-9586，逾期保证金申诉不给予受理。
                    </p>
                  </div>
                  <div style="margin: 8px 0">
                    <p style="font-weight: bold">四、保证金抵货款:</p>
                    <p style="padding-left: 32px; color: grey">
                      用户竞拍成功后，如果保证金金额小于最终成交价，用户交纳的保证金将自动转化为部分成交款，用户需在规定时间内交纳剩余尾款;如果保证金金额大于或者等于最终成交价，用户需要全额支付货款，保证金将在订单完成后返还给用户。
                    </p>
                  </div>
                  <div style="margin: 8px 0">
                    <p style="font-weight: bold">
                      五、违约责任成交不卖的违约赔偿:
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      用户竞拍成功并支付成交款后，如因送拍机构原因出现了“成交不卖”的违规行为，包括但不限于关闭交易或未履约发货，送拍机构应为用户办理退款，同时，用户还将获得由送拍机构提供的金额为所缴纳保证金金额一倍的违约金作为赔偿。退款、赔偿及法律责任的追究，由送拍机构线下与用户自行联系完成。所涉款项不通过京东平台支付，京东平台亦不对此承担任何义务与法律责任。
                    </p>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="卖家承诺">
              <!-- 卖家承诺 -->
              <div
                style="
                  width: 95%;
                  margin: 0 auto;
                  padding: 15px 0;
                  display: flex;
                  flex-direction: column;
                "
              >
                <el-divider content-position="center">卖家承诺</el-divider>
                <div style="margin: 0; padding: 15px">
                  <div style="margin: 8px 0">
                    <p style="font-weight: bold">一、服务承诺:</p>
                    <p style="font-weight: bold">A.商家承诺:</p>
                    <p style="padding-left: 32px; color: grey">
                      1.卖家承诺所发拍品如实描述。
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      ⒉.卖家成交不卖，卖家应将保证金退一赔一给竞买成功人。
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      3.竞拍成功后，拍品全国包邮(港澳台除外)。其中拍品重50斤以上(大件家具30斤)或面积大于2个平方不包邮，二手车、房地产、运输设备、不动产、明星见面会等也不包邮。
                    </p>
                    <p style="font-weight: bold">B.拍卖行承诺:</p>
                    <p style="padding-left: 32px; color: grey">
                      友情提示根据中华人民共和国法律，拍卖行具有合法的拍卖经营主体资格，在中华人民共和国法律和政策允许的范围内，组织和开展拍卖活动。凡参加拍卖行组织、开展的文物、网络竞投拍卖、艺术品等收藏品拍卖活动的委托人、竞买人、买受人和其他相关各方均视为同意且应遵守《中华人民共和国拍卖法》。
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      1.依据《中华人民共和国拍卖法》的规定，拍卖行承诺如实描述拍品。
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      ⒉拍卖行成交不卖，拍卖行应将保证金退一赔一向竞买成功人。
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      3.关于拍卖行服务费收取:依据《中华人民共和国拍卖法》的规定，竞买人在竞拍成功后，需根据拍卖行约定（商品页面描述服务费额），缴纳约定比例、数额的服务费。
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      4.关于运费:由竞买成功人承担，以拍卖行实际商品描述运费为准。(如:贵重商品额外保险费用需要由竞买成功人承担)。
                    </p>
                  </div>
                  <div style="margin: 8px 0">
                    <p style="font-weight: bold">二、竞拍活动基础服务</p>
                    <p style="padding-left: 32px; color: grey">
                      1.如实描述承诺:卖家承诺如实描述，一旦发现描述不符的拍品，买家可在交易成功后指定期限内向京东投诉卖家。
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      ⒉保证金保障:卖家入驻竞拍平台需缴纳较高的经营保证金，买家维权有保障。
                    </p>
                  </div>
                  <div style="margin: 8px 0">
                    <p style="font-weight: bold">三、拍卖行特色服务</p>
                    <p style="font-weight: bold">A.不支持7天无理由退货</p>
                    <p style="padding-left: 32px; color: grey">
                      拍卖拍品不同于普通网购商品，多数属于孤品或者数量较少，消费者通过竞价方式购买拍品，一旦售出将影响拍品价值，不支持7天无理由退货。
                    </p>
                    <p style="font-weight: bold">B.支持线下预览</p>
                    <p style="padding-left: 32px; color: grey">
                      送拍机构如支持线下预览是指其公司已选定场地预展拍品，竞买人可在竞拍结束前，亲自或委托他人查看竞拍品实物;如竞拍者未到现场鉴赏，视默认为该竞拍品的实际属性。
                    </p>
                    <p style="font-weight: bold">C.关于鉴定证书</p>
                    <p style="padding-left: 32px; color: grey">
                      若拍卖行选择提供鉴定证书，即卖家承诺所发布的拍品已取得省级以上鉴定证书或作者本人出具的书面鉴定文本，反之即不提供。
                    </p>
                  </div>
                  <div style="margin: 8px 0">
                    <p style="font-weight: bold">四、保证金抵货款:</p>
                    <p style="padding-left: 32px; color: grey">
                      用户竞拍成功后，如果保证金金额小于最终成交价，用户交纳的保证金将自动转化为部分成交款，用户需在规定时间内交纳剩余尾款;如果保证金金额大于或者等于最终成交价，用户需要全额支付货款，保证金将在订单完成后返还给用户。
                    </p>
                  </div>
                  <div style="margin: 8px 0">
                    <p style="font-weight: bold">
                      五、违约责任成交不卖的违约赔偿:
                    </p>
                    <p style="padding-left: 32px; color: grey">
                      用户竞拍成功并支付成交款后，如因送拍机构原因出现了“成交不卖”的违规行为，包括但不限于关闭交易或未履约发货，送拍机构应为用户办理退款，同时，用户还将获得由送拍机构提供的金额为所缴纳保证金金额一倍的违约金作为赔偿。退款、赔偿及法律责任的追究，由送拍机构线下与用户自行联系完成。所涉款项不通过京东平台支付，京东平台亦不对此承担任何义务与法律责任。
                    </p>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="相关帮助">
              <!-- 相关帮助 -->
              <div
                style="
                  width: 95%;
                  margin: 0 auto;
                  padding: 15px 0;
                  display: flex;
                  flex-direction: column;
                "
              >
                <el-divider content-position="center">相关帮助</el-divider>
                <div style="margin: 0; padding: 15px">
                  <div style="margin: 20px 0">
                    <p
                      style="
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <span
                        style="
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >Q</span
                      >
                      <span style="margin: 0"
                        >1.参加竞拍活动需要做的准备工作?</span
                      >
                    </p>
                    <p
                      style="font-weight: bold; display: flex; margin-top: 10px"
                    >
                      <span
                        style="
                          max-height: 19px;
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >A</span
                      >
                      <span style="margin: 0; color: grey"
                        >竞拍前请务必详细阅读卖家承诺的内容，竞拍前可联系送拍机构，了解拍品的详细情况。</span
                      >
                    </p>
                  </div>
                  <div style="margin: 20px 0">
                    <p
                      style="
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <span
                        style="
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >Q</span
                      >
                      <span style="margin: 0">2.报名须知?</span>
                    </p>
                    <p
                      style="font-weight: bold; display: flex; margin-top: 10px"
                    >
                      <span
                        style="
                          max-height: 19px;
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >A</span
                      >
                      <span style="margin: 0; color: grey"
                        >凡是具备完全民事行为能力的公民均可在在京东报名参加竞拍，如用户有意参加相关商品的竞拍活动，则须提前缴纳卖家设置的参与竞拍活动的保证金。</span
                      >
                    </p>
                  </div>
                  <div style="margin: 20px 0">
                    <p
                      style="
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <span
                        style="
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >Q</span
                      >
                      <span style="margin: 0">3.如何“交保证金报名”?</span>
                    </p>
                    <p
                      style="font-weight: bold; display: flex; margin-top: 10px"
                    >
                      <span
                        style="
                          max-height: 19px;
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >A</span
                      >
                      <span style="margin: 0; color: grey"
                        >请在报名前先登录闲呗账号，在拍品详情页点击“交保证金报名”按钮进入报名流程并交纳保证金,如参加升价拍，每个商品的竞拍只需要缴纳一次保证金:如参加降价拍,
                        每出价一次都需要缴纳一次保证金，并且每次出价只可以竞拍一件拍品。</span
                      >
                    </p>
                  </div>
                  <div style="margin: 20px 0">
                    <p
                      style="
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <span
                        style="
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >Q</span
                      >
                      <span style="margin: 0">4.怎么查询我的保证金?</span>
                    </p>
                    <p
                      style="font-weight: bold; display: flex; margin-top: 10px"
                    >
                      <span
                        style="
                          max-height: 19px;
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >A</span
                      >
                      <span style="margin: 0; color: grey"
                        >已缴纳的保证金详情，您可在拍卖频道右上方“我的拍卖-我的保证金”中查询。</span
                      >
                    </p>
                  </div>
                  <div style="margin: 20px 0">
                    <p
                      style="
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <span
                        style="
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >Q</span
                      >
                      <span style="margin: 0">5.什么情况下退还保证金?</span>
                    </p>
                    <p
                      style="font-weight: bold; display: flex; margin-top: 10px"
                    >
                      <span
                        style="
                          max-height: 19px;
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >A</span
                      >
                      <span style="margin: 0; color: grey"
                        >(1）用户未成功竞拍商品:例如在竞拍过程中始终未出价、在竞拍过程中放弃加价等情况;</span
                      >
                      <span style="margin: 0; color: grey"
                        >(2)用户竞拍成功后，商家主动关闭交易或未履约发货或因商家其他原因导致交易未完成的;竞拍结束后，系统会自动在1-15个工作日内将款项内退还到支付账号中，如您缴纳的竞拍保证金符合退还条件，但是系统未予退还，您可以联系拍卖客服专线400-622-9586，我们会尽快帮您处理。</span
                      >
                    </p>
                  </div>
                  <div style="margin: 20px 0">
                    <p
                      style="
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <span
                        style="
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >Q</span
                      >
                      <span style="margin: 0"
                        >6.竞拍成功后如何支付剩余成交款?</span
                      >
                    </p>
                    <p
                      style="font-weight: bold; display: flex; margin-top: 10px"
                    >
                      <span
                        style="
                          max-height: 19px;
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >A</span
                      >
                      <span style="margin: 0; color: grey"
                        >用户成功竞拍后，若保证金金额小于最终成交价，用户缴纳的保证金将转化为部分成交款，用户需在规定时间内缴纳剩余的尾款:若保证金金额大于或者等于最终成交价，则用户需要全额支付货款，保证金将在订单完成后返还给用户。</span
                      >
                    </p>
                  </div>
                  <div style="margin: 20px 0">
                    <p
                      style="
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <span
                        style="
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >Q</span
                      >
                      <span style="margin: 0">7.网银支付限额?</span>
                    </p>
                    <p
                      style="font-weight: bold; display: flex; margin-top: 10px"
                    >
                      <span
                        style="
                          max-height: 19px;
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >A</span
                      >
                      <span style="margin: 0; color: grey"
                        >部分竞拍拍品因涉及金额较大，为避免您在在线支付的过程中，遇到因限额而导致的无法支付的问题，建议您提前到相关银行办理网银支付的业务，网银支付的最高限额以各大银行规定为准。如未开通网银支付，用户可在客服联系卖家，通过向京东代收款账户转账的方式支付尾款。</span
                      >
                    </p>
                  </div>
                  <div style="margin: 20px 0">
                    <p style="font-weight: bold; display: flex">
                      <span
                        style="
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                        "
                        >Q</span
                      >
                      <span style="margin: 0"
                        >8.违约责任成交不卖的违约赔偿?</span
                      >
                    </p>
                    <p
                      style="font-weight: bold; display: flex; margin-top: 10px"
                    >
                      <span
                        style="
                          margin: 0;
                          background: orange;
                          color: white;
                          padding: 2px 5px;
                          margin-right: 10px;
                          max-height: 19px;
                        "
                        >A</span
                      >
                      <span style="margin: 0; color: grey"
                        >用户竞拍成功并支付成交款后，如因送拍机构原因出现了“成交不卖”的违规行为，包括但不限于关闭交易或未履约发货，送拍机构应为用户办理退款，同时，用户还将获得由送拍机构提供的金额为所缴纳保证金金额一倍的违约金作为赔偿。退款、赔偿及法律责任的追究，由送拍机构线下与用户自行联系完成;如竞拍成功后，因买家个人原因申请的退款，保证金将直接扣除。</span
                      >
                    </p>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
   
    <!-- 服务保障 -->
    <div class="showService">
      <div>
        <!-- <img src="../../public/paimai/icon01.png" alt=""> -->
        <div>
          <p>如实描述承诺</p>
          <p>送拍机构在发拍品时会履行实物描述义务</p>
        </div>
      </div>
      <div>
        <!-- <img src="../../public/paimai/icon02.png" alt=""> -->
        <div>
          <p>保证金保障</p>
          <p>缴纳足额保证金来确保安全</p>
        </div>
      </div>
      <div>
        <!-- <img src="../../public/paimai/icon03.png" alt=""> -->
        <div>
          <p>售后服务保障</p>
          <p>在发拍品时会履行实物描述义务</p>
        </div>
      </div>
    </div>
    <!-- 返回顶部 -->
    <el-backtop :bottom="100">
      <div
        style="
           {
            height: 100%;
            width: 100%;
            background-color: #f2f5f6;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
            text-align: center;
            line-height: 40px;
            color: #1989fa;
          }
        "
      >
        UP
      </div>
    </el-backtop>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from 'vant';

export default {
  data() {
    return {
      userTel: sessionStorage.getItem("userTel"),
      activeIndex: "1",
      time: 30 * 60 * 60 * 1000,
      num: "", //步进器
      num1: "",
      add: "", //最低加价
      imgUlLength: 10, // 图片数量 动态
      // 商品详情数组
      goodsArr: [],

      // 拍卖排行榜数组
      paimaiArr:[],

      // 预约拍卖
      collectColor:"red",

      // 卖家信息数组
      hotelArr:[]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath, 182);
    },
    getLeftImg() {
      document.getElementsByClassName("imgDiv")[0].scrollLeft -= 60;
    },
    getRightImg() {
      document.getElementsByClassName("imgDiv")[0].scrollLeft += 60;
    },

    //拿到拍卖详情表数据
    getGoodsData() {
      this.$axios({
        url: "/api/pmXiangqing/get",
        methods: "get",
        params: {
          auctionId: localStorage.getItem("paimaiAuctionId"),
        },
      })
        .then((resp) => {
          console.log(resp.data, 199);
          this.goodsArr = resp.data.data;

          // 最低加价
          this.add = resp.data.data[0].addPrice;

          // 拍买最新价
          this.num = resp.data.data[0].nowPrice;

          this.num1 = resp.data.data[0].nowPrice;

          // 放大镜 ！！
          let self = this;
          setTimeout(() => {
            self.fdj();
          }, 1000);
          // this.fdj()
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 放大镜
    fdj() {
      // 商品详情图切换
      var imgs = document.getElementsByClassName("img1"); //再通过ul的引用对象得到img的引用对象
      for (var i = 0; i < imgs.length; i++) {
        //遍历注册事件
        imgs[i].onmouseover = function () {
          // 小图
          var bigImg = document.getElementById("detail");
          bigImg.src = this.getAttribute("data");
          // 大图
          var bigImg1 = document.getElementById("detail1");
          bigImg1.src = bigImg.src;
        };
      }

      // 放大镜
      let even = document.querySelector(".even"); //移入的地方
      let mask = document.querySelector(".mask"); //遮罩层
      let big = document.querySelector(".big img"); //大图
      even.onmousemove = function (e) {
        e = event || window.event;

        //当前鼠标在 元素的X轴的位置 - 遮罩层的宽度/2 = 鼠标的X轴位置在遮罩层的中间
        let left = e.offsetX - mask.offsetWidth / 2;
        let top = e.offsetY - mask.offsetHeight / 2;

        // 鼠标移入限制的范围
        if (left <= 0) left = 0;
        if (left >= mask.offsetWidth - 10) left = mask.offsetWidth;

        if (top <= 0) top = 0;
        if (top >= mask.offsetHeight - 10) top = mask.offsetHeight;

        // 修改遮罩层的位置
        mask.style.left = left + "px";
        mask.style.top = top + "px";
        // 修改大图的位置:  让大图向左移动
        // 大图是小图的 2 倍，想让大图移动，就得 -2 * left
        big.style.left = -2 * left + "px";
        big.style.top = -2 * top + "px";
      };
    },

    //拿到店家信息
      getHotel(){
          this.$axios({
              url:"/api/userTable/get",
              methods:"get",
              params:{
                  userTel:localStorage.getItem("paimaiuserTel")
              }
          })
          .then(resp=>{
              console.log(resp.data.data,268)
              this.hotelArr=resp.data.data
          })
          .catch(err=>{
              console.log(err)
          })
      },



    // 出价
    chujia() {
      if (sessionStorage.getItem("userTel") == null) {
        Toast("请先登录");
        return;
      }

      Dialog.confirm({
        title: '拍卖说明',
        message: '拍卖拍品不同于普通网购商品,多数属于孤品,消费者通过竞价方式购买拍品,一旦售出将影响拍品价值,“7天退货”服务为卖家可选服务保障,不强制送拍机构提供,竞拍前请充分考虑,付款成功后我们会在48小时内为您发出',
      })
        .then(() => {
          this.$axios.post(
          "/api/auctionRecord/adding",
          this.$qs.stringify({
            auctionId: localStorage.getItem("paimaiAuctionId"),
            newprice: this.num,
            userTel: sessionStorage.getItem("userTel"),
            nowPrice: this.goodsArr[0].nowPrice,
            addprice: this.add,
          })
        )
        .then((resp) => {
          console.log(resp.data.code, 1215);
          if (resp.data.code == 202) {
            Toast("有人价格比你高了，价格错误,出价失败");
          } else if (resp.data.code == 201) {
            Toast("已经是第一");
          } else if (resp.data.code == 200) {
            Toast("出价成功");
          }
        })
        .catch((err) => {
          console.log(err);
        });
        })

        .catch(() => {
         
        });

      
    },

    // 拍卖排行榜
    paimaiPh() {
      this.$axios({
        url: "/api/auctionRecord/getBidding",
        methods: "get",
        params: {
          auctionId: localStorage.getItem("paimaiAuctionId"),
        },
      })
        .then((resp) => {
          console.log(resp.data.data, 1260);
          this.paimaiArr=resp.data.data
        })
        .catch((err) => {
          console.log(err);
        });
    },




     // 查询预约拍卖
      cxYuyue(){
          this.$axios({
              url:"/api/getappointmentman",
              methods:"get",
              params:{
                auctionId: localStorage.getItem("paimaiAuctionId"),
                userTel: sessionStorage.getItem("userTel"),
              }
          })
          .then(resp=>{
              // console.log(resp.data,409)
              if(resp.data.data.length>0){
                  this.collectStore="red"
              }else{
                  this.collectStore="grey"
              }
          })
          .catch(err=>{
              console.log(err)
          })
      },


    // 预约拍卖
    yuyue(){
        if (sessionStorage.getItem("userTel") == null) {
        Toast("请先登录");
        return;
      }
      this.$axios
        .post(
          "/api/updateappointment",
          this.$qs.stringify({
            auctionId: localStorage.getItem("paimaiAuctionId"),
            userTel: sessionStorage.getItem("userTel"),
          })
        )
        .then((resp) => {
          console.log(resp.data, 1266);
          if(this.collectColor == 'red'){
              this.collectColor = 'grey';
              Toast("取消预约成功")
          }else if(this.collectColor == 'grey'){
              this.collectColor = 'red';
              Toast("预约成功")
          }
          
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 关注卖家
    guanZhu(){
       if (sessionStorage.getItem("userTel") == null) {
        Toast("请先登录");
        return;
      }
      this.$axios.post(
          "/api/followman",
          this.$qs.stringify({
            beFocuson:localStorage.getItem("paimaiuserTel"), //被关注的人(卖家)
            follower:sessionStorage.getItem("userTel"), //关注的人(买家)
          })
        )
        .then((resp) => {
          console.log(resp.data,1321)
          if(resp.data.msg=="已关注"){
            Toast("已关注买家")
          }else{
            Toast("已取消关注")
          }
          
        })
        .catch((err) => {
          console.log(err);
        });
    },


    // 跳转登录
    goLogin(){
        this.$router.push({name:'Login'})
    },

    // 跳转注册
    gozce(){
        this.$router.push({name:'Register'})
    },

    //退出登录的方法
    tuichu(){
        sessionStorage.removeItem('userTel')

    },

    //到个人中心
    gomycenter(){
        if(sessionStorage.getItem('userTel')==null){
            this.$router.push({
                name:'Login'
            })
        }else{
            this.$router.push({
                name:'MyCenter'
            })
        }
    },
    //去客服聊天
    gocustomerchat(){  
        if (sessionStorage.getItem('userTel')) {
            this.$router.push({name: 'CustomerChat'})
        }
    },

      // 跳转首页
    gohomepage(){
        this.$router.push('/')

    }
    
    
  
  },


  mounted() {
    window.scrollTo(0, 0); //置顶最上面窗口
    this.getGoodsData();
    this.paimaiPh(); //拍卖排行
    this.getHotel()

    

  },
};
</script>

<style scoped>
.container {
  width: 1260px;
  padding: 0;
  margin: 0 auto;
}


.contactUs {
  width: 95%;
  padding: 0 3%;
  box-sizing: border-box;
  height: 40px;
  display: flex;
  justify-content: space-between;
}

/* 商品展示 */
.showGoods {
  width: 95%;
  height: 440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.showGoods > div:nth-child(1) {
  width: 30%;
  /* border: 1px solid red; */
}
.showGoods > div:nth-child(2) {
  width: 50%;
  /* border: 1px solid red; */
}

.showGoods > div:nth-child(3) {
  width: 15%;
  height: 230px;
  overflow: hidden;
  /* border: 1px solid red; */
}

.goodsImg {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.goodsImg > div:last-child {
  width: 100%;
  height: 54px;
  display: flex;
  justify-content: space-between;
  /* border: 1px solid red; */
}
.goodsImg > div:last-child > img {
  width: 10%;
  height: 100%;
}
.goodsImg > div:last-child > div {
  width: 80%;
  height: 100%;
  /* border: 1px solid red; */
  /* box-sizing: border-box; */
  overflow: hidden;
}
.goodsImg > div:last-child > div > ul {
  width: auto;
  height: 50px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.goodsImg > div:last-child > div > ul > li {
  display: inline-block;
  width: 50px;
  height: 50px;
  padding: 0 5px;
  margin: 0;
  box-sizing: content-box;
}
.goodsImg > div:last-child > div > ul > li > img {
  width: 100%;
  height: 100%;
}
.goodsImg > div:last-child > div > ul > li > img:hover {
  border: 2px solid red;
}

/* 放大镜 ！！ */
* {
  /* 清除默认样式 */
  padding: 0;
  margin: 0;
  border: 0;
}
.left1 {
  /* 父容器的样式（此次宽高只要不是0，就不影响代码，是根据图片的宽高调整的）*/
  width: 100%;
  height: 380px;
  background-color: skyblue;
  position: relative;
}
.even {
  /*鼠标移入的地方*/
  width: 100%;
  height: 380px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 998;
}
.mask {
  /*遮罩层：父容器的一半  半透明  left + top ：调整遮罩层的初始位置*/
  width: 50%;
  height: 50%;
  background-color: greenyellow;
  opacity: 0.5;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
img {
  /*小图：鼠标移入上去的图*/
  width: 100%;
  height: 100%;
}
.big {
  /*大图的父容器： left: 100% 让大图在小图的右侧显示，裁剪多余部分*/
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  border: 1px solid #aaa;
  overflow: hidden;
  z-index: 998;
  display: none;
}
.big img {
  /*大图：width + height 放大2倍*/
  width: 200%;
  height: 200%;
  position: absolute;
  left: 0;
  top: 0;
}
.left1:hover .mask,
.left1:hover .big {
  /*移入父容器显示：遮罩层 + 大图*/
  display: block;
}

/* 服务保障 */
.showService {
  width: 95%;
  margin: 0 auto;
  display: flex;
  margin-top: 80px;
  margin-bottom: 20px;
}
.showService > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.showService > div > img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin-right: 8px;
}
.showService > div > div > p:first-child {
  font-size: 30px;
  color: rgb(102, 103, 102);
}
.showService > div > div > p:last-child {
  font-size: 13px;
  color: grey;
  margin: 3px 0;
}

/* 左侧 */
.left {
  width: 35%;
  height: 900px;
  /* border:1px solid black */
}

.left1 > img {
  width: 100%;
  height: 380px;
}

.left2 {
  width: 60%;
  margin-top: 20px;
}

.left2 > ul {
  display: flex;
  justify-content: space-between;
  width: 168%;
  height: 55px;
}

.left2 > ul > li {
  /* border: 1px solid black; */
}

.left2 > ul > li > img {
  width: 100%;
  height: 60px;
}

/* 拍卖排行 */
.paihang {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}


.textRed{
  color:red
}

.xiangqingtu{
  width: 50%;
  display: flex;
  justify-content: space-between;
}

.xiangqingtu>img{
  width: 60px;
  height: 60px;
}
</style>